import router, { asyncRoutes } from '@/router'
import store from '@/store'
// 虚拟进度条 NProgress.start()  .done() 结束进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'
import getPageTitle from '@/utils/get-page-title'

// 路由守卫，to 去哪，  from 从哪来，next 放行函数
router.beforeEach(async(to, from, next) => {
  // console.log(to, from, next)
  // console.log(to)
  // 通过getPageTitle函数 操作页面标题的函数
  document.title = getPageTitle(to.meta.title)
  // document.title = to.meta.title
  // 开启进度条
  NProgress.start()
  // 从vuex 中获得token
  const token = store.state.user.token
  const whiteList = ['/login', '/404']
  if (token) {
  // 有token时，不允许访问登录页面
    // if (to.path === '/login') {
    if (whiteList.includes(to.path)) {
      next('/')
      NProgress.done()
    } else {
      // 添加判断条件 来决定是否发请求
      if (!store.state.user.userInfo.id) {
        // id存在的时候就不发请求，消失的时候发，节省性能
        const res = await store.dispatch('user/getUseInfoAcion')
        // console.log(res)
        const filterRoutes = asyncRoutes.filter(item => {
          const currentName = item.children[0].name
          return res.includes(currentName)
        })
        console.log('过滤后的数组', filterRoutes)
        // 我们的动态路由就添加在下面这里
        // 下面代码写完只有， 动态路由在内存里面，没有响应式的更新到左侧菜单
        // 为什么要在这里动态添加路由呢？ 因为上面有请求，返回的值里面有用户具有的一些权限数组列表
        // 可以将asyncRoutes 这个数组，进行过滤， 比如说asyncRoutes数组里面有50个元素，就是50个页面
        // 用户登录返回对应的权限以后， 在50个元素里面筛选，然后再动态加进去
        // router.addRoutes(asyncRoutes)
        router.addRoutes(filterRoutes)

        // store.commit('menu/setMenuList', asyncRoutes)
        store.commit('menu/setMenuList', filterRoutes)
        // 如果当前页面是动态添加的路由，在当前页面刷新的时候，要么是白屏，要么是调到首页
        next({
          ...to, // 动态添加的路由，重新在进入一遍
          replace: true // 将重新调整的动态路由的历史，不要加入到历史记录里面
        })
      } else {
        // 请求完成才允许继续跳转,所以此处必须添加await
        next()
      }
    }
  } else {
    // 无token时，不允许访问除login以外的页面
    // if (to.path === '/login') {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 进入页面的钩子函数
// 并不一定都会执行，如果在进入beforeEach的钩子函数里面
// 通过next('参数') 跳转到了其他页面，这个函数不会执行
router.afterEach(() => {
  NProgress.done()
})
